<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container class="page-main">
		<el-header style="padding: 0;">
			<el-header class="page-header"  height="60px">
				<div class="h-left">
					<el-link :underline="false" href="index.php?mod=manage" style="margin-right: 8px;"><el-icon style="color: var(--el-text-color-primary);"><Arrow-Left-Bold /></el-icon></el-link>
					<el-text tag="b" size="large" style="color:var(--el-text-color-primary)">{eval echo $appname?$appname:$_G['setting'][sitename]}</el-text>
				</div>
				<div class="h-right"> 
					<el-tooltip content="切换页面配色" placement="bottom">
						<el-button 
							text 
							:icon="DocumentThemeColor=='light'?'Sunny':'Moon'" 
							style="font-size: var(--el-font-size-extra-large);" 
							circle  
							size="large"
							@click="DocumentThemeChange">
						</el-button>
					</el-tooltip>
					<comavatar
						:level="parseInt($_G[pichomelevel])"
						iscollect="<!--{if defined('PICHOME_LIENCE') && (!$_G[config][pichomeclosecollect] || $_G[adminid])}--><!--{/if}-->"
						:adminid="parseInt($_G[adminid])"
						PICHOME_LIENCE="<!--{if defined('PICHOME_LIENCE')}--><!--{/if}-->"
						:uid="parseInt($_G[uid])"
						upgrade="<!--{if $_G['setting']['upgrade']}--><!--{/if}-->"
						version="$_G[setting][version]"
						formhash="{FORMHASH}"
						:isrefresh="true">
						<el-avatar size="40">
							{eval echo avatar_block($_G[uid]);}
						</el-avatar>
					</comavatar>
				</div>
			</el-header>
		</el-header>
		<el-container>
		  	<el-aside width="200px" class="page-left">
				<el-menu :default-active="leftactive" style="border: 0;" @select="LeftSelect">
					<el-menu-item index="secretkey">
						<span>{lang setting}</span>
					</el-menu-item>
				</el-menu>
				
			</el-aside>
			<el-main>
				<el-scrollbar>
					<div v-show="leftactive == 'secretkey'">
						<div class="content" v-loading="btnloading">
							<el-form :model="secretkeyruleForm" :rules="secretkeyrules" ref="fsecretkeyruleForm" label-width="120px" label-suffix="：">
								<el-form-item label="{lang kkFileView_Preview}" prop="host">
									<el-input class="maxWidth" v-model.trim="secretkeyruleForm.host"></el-input>
									<el-text type="info" class="tipTxt" size="small">{lang The_kkFileView_URL}</el-text>
								</el-form-item>
						
								<el-form-item label="{lang watermarkTxt}" prop="watermarkTxt">
									<el-input class="maxWidth" v-model.trim="secretkeyruleForm.watermarkTxt"></el-input>
									<el-text type="info" class="tipTxt" size="small">{lang watermarkTxt_info}</el-text>
								</el-form-item>
								<el-form-item label="状态">
									<el-switch
										v-model="secretkeyruleForm.status"
										active-text="开启"
										inactive-text="关闭"
										:active-value="1"
										:inactive-value="0"
									></el-switch>
									<el-text type="info" class="tipTxt" size="small" style="display: block;width: 100%;">开启后，系统中能够使用kkFileView进行文件文档在线预览，预览接口填写后可以开启</el-text>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="secretkeySubmit">保存更改</el-button>
								</el-form-item>
							</el-form>
						</div>
						<script>
							let secretkeyMixin = {
								data() {
									return {
										secretkeyruleForm: {
											host:"$setting['host']",
											watermarkTxt:"$setting['watermarkTxt']",
											status:$setting['status']
										},
										secretkeyrules: {
											host: [
												{ required: true, message: '必填项不能为空', trigger: 'blur' },
												{
													validator: (rule, value, callback) => {
														const regex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
														if (value && !regex.test(value)) {
														callback(new Error('请输入合法的URL'));
														} else {
														callback();
														}
													},
													trigger: 'blur'
													}
											],
										},
									}
								},
								methods: {
									secretkeySubmit(){
										var self = this;
										self.$refs.fsecretkeyruleForm.validate(async function(valid){
											if (valid) {
												var params = {
													'settingsumbit':true,
													'formhash':'{FORMHASH}',
													'host':self.secretkeyruleForm.host,
													'watermarkTxt':self.secretkeyruleForm.watermarkTxt,
													'status':self.secretkeyruleForm.status,
												};
												
												self.btnloading = true;
												const {data: res} = await axios.post('{MOD_URL}&op=setting',params);
												if(res.success){
													 self.$message({
														 message: '保存成功',
														 type: 'success'
													 });
													window.location.reload();
												}else{
													self.btnloading = false;
													self.$message.error(res.msg || '提交失败');
												}
											
											} else {
												self.$message.error('验证失败');
												self.btnloading = false;
												return false;
											}
										});
									}
								},
							}
						</script>
					</div>
				</el-scrollbar>
			</el-main>
		</el-container>
	</el-container>
</div>
<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			return {
				leftactive:'secretkey',
				DocumentThemeColor:'',
				btnloading:false,
			}
		},
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
		},
		mixins:[secretkeyMixin],
		created() {
			 //主题颜色
			 let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
			
		},
		methods: {
			LeftSelect(value){
				if(this.leftactive == value)return false;
				this.leftactive = value;
				if(value != 'secretkey'){
					this.PromptGet();
					this.PromptSortable();
				}
			},
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
				
			},
		},
		mounted() {}
	});
	dzzoffice.use(ElementPlus, {
		locale: ElementPlusLocaleZhCn,
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	dzzoffice.component('comavatar', comavatar)
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template pc/frame/footer_simple}-->